<script lang="ts" setup>
import {commonTransform} from '@/utils/transform';

import {searchOrder} from '@/api/order';
import type {ISearchParams, IOrder} from '@/types/request'
import type {ColumnsType, ColumnType} from 'ant-design-vue/es/table'
import type {TransformOrder} from '@/types/table-transform';

// 转换数据格式
function transformOrder(order: IOrder): TransformOrder {
    return {
        ...commonTransform(order),
    }
}

// 表格列表
const columns = $ref<ColumnsType>([
    {
        title: '订单号',
        dataIndex: 'out_trade_no',
        key: 'out_trade_no',
        width: 320,
        fixed: true
    },
    {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
        width: 150
    },
    {
        title: '用户ID',
        dataIndex: 'account_id',
        key: 'account_id',
        width: 100
    },
    {
        title: '用户头像',
        dataIndex: 'user_head_img',
        key: 'user_head_img',
        width: 100,
        showImage: true
    },
    {
        title: '课程ID',
        dataIndex: 'product_id',
        key: 'product_id',
        width: 80
    },

    {
        title: '订单状态',
        dataIndex: 'order_state',
        key: 'order_state',
        width: 100
    },
    {
        title: '订单总金额',
        dataIndex: 'total_amount',
        key: 'total_amount',
        width: 120
    },
    {
        title: '实际支付金额',
        dataIndex: 'pay_amount',
        key: 'pay_amount',
        width: 140
    },
    {
        title: '课程标题',
        dataIndex: 'product_title',
        key: 'product_title',
        width: 300,
        ellipsis: true
    },
    {
        title: '课程图片',
        dataIndex: 'product_img',
        key: 'product_img',
        width: 140,
        showImage: true
    },
])

// 表格数据
let realDataSource = $ref<TransformOrder[]>([])

// 搜索参数
const searchParams = reactive<ISearchParams>({
    page: 1,
    size: 5,
    total: 0,
    condition: '',
    gmt_end: '',
    gmt_start: '',
})

// 搜索方法
async function handleRequest() {
    const response = await searchOrder(searchParams)
    realDataSource = response.data?.current_data?.map(item => transformOrder(item))
    return response
}

</script>

<template>
    <div>
        <Search show-time name="订单" :search-params="searchParams" :on-search-request="handleRequest"/>
        <Table :search-params="searchParams" :expand-columns="columns" :real-data-source="realDataSource"
               :on-request="handleRequest"/>
    </div>
</template>
